<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import { ref } from 'vue'
import getUrl from './assets/js/axios.js'

const vmid = ref<number>(100408831);
const dynamicId = ref<number>();
const spmId = ref<number>();
const dynamicUrl = ref<String>("/web/opus/1066784838154977280?spm_id_from=333.1387.0.0");
const apis = [
  //查看转发数
  "/vc/dynamic_repost/v1/dynamic_repost/repost_detail?dynamic_id={dynamicId}"
  //查看评论数
  , "/api/x/v2/reply?type=17&oid={dynamicId}"
  //oid转dynamicId
  , "/api/x/polymer/web-dynamic/v1/detail?timezone_offset=-480&id={spmId}"
  //查看粉丝数
  , "/api/relation/followers?vmid={vmid}"];
const showHeader = ref<boolean>(true);

function getOid() {
  const regex = /\/opus\/(\d+)(?:\?|$)/;
  const match = dynamicUrl.value.match(regex);

  if (match && match[1]) {
    console.log(match[1]); // 输出: 1066784838154977280
    spmId.value=Number(match[1]);
    const url=apis[2].replace("{spmId}", spmId.value.toString());
    getUrl(url).then((res:any) => {
      console.log(res);
    });
  } else {
    console.log('没有找到匹配的opus id');
  }   
}
getOid();
</script>

<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <button @click="showHeader = !showHeader">{{ showHeader ? "隐藏" : "显示" }}输入框</button>
      </div>
    </div>
    <div class="row" v-show="showHeader">
      <div class="col">
        <label for="vmid">伟大的是默然喔的UID</label>
        <input name="vmid" type="text" class="form-control" placeholder="请输入您的UID" v-model="vmid" />
      </div>
      <div class="col-8">
        <label for="dynamicUrl">伟大的抽奖动态链接</label>
        <input name="dynamicUrl" type="text" class="form-control" v-model="dynamicUrl" placeholder="请输入动态的链接" />
      </div>
      <div class="col">
        <button class="btn btn-primary">
          启用转移魔法阵
        </button>
      </div>
    </div>
    <div class="row">
      <div class="col">
        11
      </div>
      <div class="col-7">
        22
      </div>
      <div class="col">
        33
      </div>

    </div>
    <div class="row">
      <div class="col">
        11
      </div>
    </div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>

  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.col {
  border: 1px solid #000;
  min-height: 200px;
}
</style>
